<template>
    <div>
        <el-steps :active="active" finish-status="success">
            <el-step title="基础信息"></el-step>
            <el-step title="高级设置"></el-step>
        </el-steps>
        <div class="interspaceH"></div>
        <!--基础信息开始-->
        <div v-if="active==0">
            <el-row>
                <el-col :span="12">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
                             label-position="left">
                        <el-form-item label="线下活动名称" prop="name">
                            <el-input style="width: 220px" v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="线下活动城市" prop="city">
                            <el-cascader :props="ruleForm.selectAddress" v-model="ruleForm.city"></el-cascader>
                        </el-form-item>
                        <el-form-item label="线下活动开始时间" prop="startTime">
                            <el-date-picker
                                    v-model="ruleForm.startTime"
                                    :picker-options="pickerOptions1"
                                    type="datetime"
                                    value-format="timestamp"
                                    placeholder="选择开始时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="线下活动结束时间" prop="endTime">
                            <el-date-picker
                                    v-model="ruleForm.endTime"
                                    :picker-options="pickerOptions1"
                                    type="datetime"
                                    value-format="timestamp"
                                    placeholder="选择结束时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="线下活动负责人" prop="empId">
                            <el-select v-model="ruleForm.empId" placeholder="请选择员工">
                                <el-option
                                        v-for="item in emp"
                                        :key="item.empId"
                                        :label="item.empName"
                                        :value="item.empId"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="线下活动地址" prop="address">
                            <el-input style="width: 220px" v-model="ruleForm.address" placeholder="请输入活动地址"></el-input>
                        </el-form-item>
                        <el-form-item label="线下活动行业分类" prop="classification">
                            <el-select v-model="ruleForm.classification" placeholder="请选择">
                                <el-option v-for="item in mainIndustrys" :key="item.value" :label="item.name"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-button @click="back">返回</el-button>
                    <!--          <el-button @click="next1">下一步</el-button>-->
                    <el-button type="primary" @click="save">保存</el-button>
                </el-col>
                <el-col :span="12">
                    <iframe src="http://wx.zzxapps.com/pages/preview/show/xianxia" frameborder="0"
                            style="width: 300px;height: 560px;"></iframe>
                </el-col>
            </el-row>
        </div>
        <!--基础信息结束-->
        <!--高级设置开始-->
        <!--    <div v-if="active==1">
                <el-row>
                    <el-col :span="12">
                      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="公司名称" prop="gongsiName">
                          <el-input style="width: 220px" v-model="ruleForm.gongsiName"></el-input>
                        </el-form-item>
                        <el-form-item label="活动介绍" prop="jieshao">
                          <el-input style="width: 220px;" v-model="ruleForm.jieshao"></el-input>
                        </el-form-item>
                        <el-form-item label="活动图片" prop="image">
                          <img style="width: 220px;height: 50px" src="@/views/masket/code/zzx_logo.png">
                        </el-form-item>
                        <el-form-item label="留资方式:" prop="liuzi">
                          <el-input style="width: 100px;" class="input-new-tag" v-if="inputVisible" v-model="inputValue"
                                    ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"
                                    @blur="handleInputConfirm">
                          </el-input>
                          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 选择员工</el-button>
                          <el-tag :key="tag" v-for="tag in ruleForm.liuzi" closable :disable-transitions="false" @close="handleClose(tag)">
                            {{tag}}
                          </el-tag>
                        </el-form-item>
                        <el-form-item label="欢迎语" prop="huanyingyu">
                          <div style="display: flex;flex-direction: column">
                            <el-button type="text" style="width: 220px;border: 1px solid #DCDFE6;display: flex;justify-content: start">&nbsp;[插入客户昵称]</el-button>
                            <el-input style="width: 220px" type="textarea" v-model="ruleForm.huanyingyu" />
                          </div>
                        </el-form-item>
                        <el-form-item label="标题" prop="biaoti">
                          <el-input style="width: 220px" v-model="ruleForm.biaoti"></el-input>
                        </el-form-item>
                        <el-form-item label="摘要" prop="zhaiyao">
                          <el-input style="width: 220px" v-model="ruleForm.zhaiyao"></el-input>
                        </el-form-item>
                        <el-form-item label="封面" prop="fengmian">
                          <img style="width: 100px;height: 150px" src="@/views/masket/code/zzx_logo.png">
                        </el-form-item>
                        <el-form-item label="报名用户标签:" prop="baomingyonghu">
                          <el-input style="width: 100px;" class="input-new-tag" v-if="inputVisible2" v-model="inputValue2"
                                    ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm2"
                                    @blur="handleInputConfirm2">
                          </el-input>
                          <el-button v-else class="button-new-tag" size="small" @click="showInput2">+ 选择标签</el-button>
                          <el-tag :key="tag" v-for="tag in ruleForm.baomingyonghu" closable :disable-transitions="false" @close="handleClose2(tag)">
                            {{tag}}
                          </el-tag>
                        </el-form-item>
                        <el-form-item label="线下签到用户标签:" prop="qiandao">
                          <el-input style="width: 100px;" class="input-new-tag" v-if="inputVisible3" v-model="inputValue3"
                                    ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm3"
                                    @blur="handleInputConfirm3">
                          </el-input>
                          <el-button v-else class="button-new-tag" size="small" @click="showInput3">+ 选择标签</el-button>
                          <el-tag :key="tag" v-for="tag in ruleForm.qiandao" closable :disable-transitions="false" @close="handleClose3(tag)">
                            {{tag}}
                          </el-tag>
                        </el-form-item>
                        <el-form-item label="签到二维码设置" prop="erweima">
                          <img style="width: 150px;height: 150px" src="@/views/masket/code/zzx_logo.png">
                          <el-button type="primary" size="small">上传公司logo</el-button>
                        </el-form-item>
                      </el-form>
                    </el-col>
                    <el-col :span="12">
                        <iframe src="http://wx.zzxapps.com/pages/preview/show/xianxia" frameborder="0" style="width: 300px;height: 560px;"></iframe>
                    </el-col>
                </el-row>
              <el-button type="primary" @click="up">上一步</el-button>

              <el-button @click="submit">提交</el-button>
            </div>-->
        <!--高级设置结束-->
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "list_add",
    data() {
        return {
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
            active: 0,
            emp: [],
            ruleForm: {
                name: '',
                city: [],
                startData: '',
                endData: '',
                people: '',
                address: '',
                classification: '',
                gongsiName: '',
                jieshao: '',
                liuzi: [],
                huanyingyu: '',
                biaoti: '',
                zhaiyao: '',
                baomingyonghu: [],
                qiandao: [],
                selectAddress: {//地址
                    checkStrictly: true,
                    lazy: true,
                    lazyLoad(node, resolve) {
                        const {level} = node;
                        let params = {};
                        if (level === 0) {
                            params.parentCode = '100000'
                        } else {
                            params.parentCode = node.value
                        }
                        axios.get('http://cos.tpchain.net:9300/api/area/getAreaByParams', {
                            params: params
                        }).then((res) => {
                            const nodes = res.data.rows.map(item => ({
                                value: item.areaCode,
                                label: item.areaName,
                            }));
                            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                            resolve(nodes);
                        })
                    }
                }
            },
            mainIndustrys: [
                {value: '1', name: '农业'},
                {value: '2', name: '食品、饮料'},
                {value: '3', name: '服装内衣'},
                {value: '4', name: '纺织、皮革'},
                {value: '5', name: '电工电气'},
                {value: '6', name: '家用电器'},
                {value: '7', name: '数码、电脑'},
                {value: '8', name: '化工'},
                {value: '9', name: '冶金矿产'},
                {value: '10', name: '能源'},
                {value: '11', name: '环保'},
                {value: '12', name: '交通运输'},
                {value: '13', name: '建筑、建材'},
                {value: '14', name: '机械及行业设备'},
                {value: '15', name: '家居用品'},
                {value: '16', name: '医药健康'},
                {value: '17', name: '礼品、工艺品、饰品'},
                {value: '18', name: '运动、休闲'},
                {value: '19', name: '仪器仪表'},
                {value: '20', name: '玩具'},
                {value: '21', name: '办公、文教'},
                {value: '22', name: '五金、工具'},
                {value: '23', name: '包装'},
                {value: '24', name: '照明工业'},
                {value: '25', name: '电子元器件'},
                {value: '26', name: '传媒、广电'},
                {value: '27', name: '精细化学品'},
                {value: '28', name: '橡塑'},
                {value: '29', name: '纸业'},
                {value: '30', name: '安全、防护'},
                {value: '31', name: '鞋包配饰'},
                {value: '32', name: '通信产品'},
                {value: '33', name: '汽摩及配件'},
                {value: '34', name: '印刷'},
                {value: '35', name: '商务服务'},
                {value: '36', name: '教育培训'},
                {value: '37', name: '二手设备'},
                {value: '38', name: '航天航空'},
            ],// 行业
            //基础信息表单验证
            rules: {
                name: [
                    {required: true, message: '请输入活动名称', trigger: 'blur'},
                    {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                ],
                city: [
                    {required: true, message: '请选择活动区域', trigger: 'change'}
                ],
                startTime: [
                    {type: 'date', required: true, message: '请选择活动开始时间', trigger: 'change'}
                ],
                endTime: [
                    {type: 'date', required: true, message: '请选择活动开始时间', trigger: 'change'}
                ],
                empId: [
                    {required: true, message: '请选择负责人', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入活动地址', trigger: 'blur'},
                ],

                gongsiName: [
                    {required: true, message: '请输入公司名称', trigger: 'blur'},
                    {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
                ],
                jieshao: [
                    {required: true, message: '请输入活动介绍', trigger: 'blur'},
                ],
            },
            inputVisible: false,
            inputVisible2: false,
            inputVisible3: false,
            inputValue: '',
            inputValue2: '',
            inputValue3: '',
        }

    },
    mounted: function () {
        this.queryDataHandle()
        let that = this;
        var query = that.$router.currentRoute.query;
        let orgId = query.orgId
        this.$request('/api/agentCompany/queryAuthentication/1_0?orgId=' + orgId, '', 'GET').then((data) => {
            that.ruleForm = {...that.ruleForm, ...data.data}
            that.ruleForm['selectAddress'] = {
                checkStrictly: true,
                lazy: true,
                lazyLoad(node, resolve) {
                    const {level} = node;
                    let params = {};
                    if (level === 0) {
                        params.parentCode = '100000'
                    } else {
                        params.parentCode = node.value
                    }
                    axios.get('http://cos.tpchain.net:9300/api/area/getAreaByParams', {
                        params: params
                    }).then((res) => {
                        const nodes = res.data.rows.map(item => ({
                            value: item.areaCode,
                            label: item.areaName,
                        }));
                        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                        resolve(nodes);
                    })
                }
            }
        })
    },
    methods: {
        queryDataHandle() {
            let that = this
            this.$request("/api/emp/getEmpList/1_0", {}, "POST").then((data) => {
                that.emp = data.rows
            })
        },

        //下一步
        next1() {
            if (this.active++ > 2) this.active = 0;
        },
        //上一步
        up() {
            this.active = 0
        },

        //返回
        back() {
            this.$emit("currentHandler", "list")
        },
        //保存
        save() {
            var citys = this.ruleForm.city
            let city = citys.join(",")
            var activityInstance = {
                activityId: this.ruleForm.activityId,
                name: this.ruleForm.name,
                startTime: this.ruleForm.startTime,
                endTime: this.ruleForm.endTime,
                empId: this.ruleForm.empId,
                activityInstanceStatus: '待发布',
                city: city,
                address: this.ruleForm.address,
                classification: this.ruleForm.classification
            }
            debugger
            let that = this
            that.$request("/api/wheel/insertOffline/1_0", activityInstance, "POST").then((data) => {
                this.$message({
                    message: '已保存',
                    type: "success"
                })
                this.back()
            })

        },
        //提交
        submit() {
            this.$message({
                message: '成功创建线下活动',
                type: 'success'
            })
            this.back()
        },
        /*留资方式开始*/
        handleClose(tag) {
            this.ruleForm.liuzi.splice(this.ruleForm.liuzi.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.ruleForm.liuzi.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        /*留资方式结束*/
        /*报名用户开始*/
        handleClose2(tag) {
            this.ruleForm.baomingyonghu.splice(this.ruleForm.baomingyonghu.indexOf(tag), 1);
        },
        showInput2() {
            this.inputVisible2 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm2() {
            let inputValue2 = this.inputValue2;
            if (inputValue2) {
                this.ruleForm.baomingyonghu.push(inputValue2);
            }
            this.inputVisible2 = false;
            this.inputValue2 = '';
        },
        /*报名用户结束*/
        /*签到开始*/
        handleClose3(tag) {
            this.ruleForm.qiandao.splice(this.ruleForm.qiandao.indexOf(tag), 1);
        },
        showInput3() {
            this.inputVisible3 = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm3() {
            let inputValue3 = this.inputValue3;
            if (inputValue3) {
                this.ruleForm.qiandao.push(inputValue3);
            }
            this.inputVisible3 = false;
            this.inputValue3 = '';
        },
        /*签到结束*/
    }
}
</script>

<style scoped>

</style>
